import React, { useState } from 'react'
import { RiCloseFill, RiCheckLine } from '@remixicon/react'
import { Switch } from '@/library/gallery/components/Switch'
import { Space } from '@/library/gallery/components/Space'
import { DemoBlock } from '@/library/widgets/DemoBlock'

const FormSwitch: React.FC = () => {
  const [checked, setChecked] = useState(false)

  const mockRequest = (): Promise<void> => new Promise((resolve) => {
    setTimeout(() => {
      resolve()
    }, 2000)
  })

  return (
    <div>
      <DemoBlock title="基础用法">
        <Switch />
      </DemoBlock>

      <DemoBlock title="有默认值">
        <Switch defaultChecked />
      </DemoBlock>

      <DemoBlock title="文字和图标">
        <Space>
          <Switch uncheckedText="关" checkedText="开" />
          <Switch uncheckedText="0" checkedText="1" />
          <Switch
            checkedText={<RiCheckLine fontSize={18} />}
            uncheckedText={<RiCloseFill fontSize={18} />}
          />
        </Space>
      </DemoBlock>

      <DemoBlock title="禁用状态">
        <Space>
          <Switch disabled />
          <Switch disabled defaultChecked />
        </Space>
      </DemoBlock>

      <DemoBlock title="加载状态">
        <Space>
          <Switch loading />
          <Switch loading defaultChecked />
        </Space>
      </DemoBlock>

      <DemoBlock title="受控">
        <Switch
          checked={checked}
          onChange={(val) => {
            console.info('开始')
            setChecked(val)
          }}
        />
      </DemoBlock>

      <DemoBlock title="异步">
        <Switch
          checked={checked}
          onChange={async (val) => {
            console.info('start')
            await mockRequest()
            setChecked(val)
          }}
        />
      </DemoBlock>

      <DemoBlock title="自定义样式">
        <Switch
          defaultChecked
          style={{
            '--checked-color': '#00b578',
            '--height': '80px',
            '--width': '60px',
          }}
        />
      </DemoBlock>
    </div>
  )
}

export default FormSwitch
